<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="UTF-8" />
        <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
        <title>Login and Registration Form with HTML5 and CSS3</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
        <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/rl.css" />
		<link rel="stylesheet" type="text/css" href="css/animate-custom.css" />
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
    </head>
    <body>
    	
        <div class="container">
      
            <section>				
                <div id="container_demo" >
                    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
                    <a class="hiddenanchor" id="toregister"></a>
                    <a class="hiddenanchor" id="tologin"></a>
                    <div id="wrapper">
                        <div id="login" class="animate form">
                            <form autocomplete="on"> 
                                <h1>Log in</h1>
                                <p> 
                                    <label for="username" class="uname" data-icon="u" > 你的邮箱号 </label>
                                    <input id="username" v-model="email" required="required" type="email" placeholder="myusername or mymail@mail.com"/>
                                </p>
                                <p> 
                                    <label for="password" class="youpasswd" data-icon="p"> 你的密码 </label>
                                    <input id="password" v-model="password" required="required" type="password" placeholder="eg. X8df!90EO" /> 
                                </p>
                                
                                <p>
                                	<label for="codeStr">验证码:</label>
                                	<input type="text" v-model="authCode" v-on:blur="checkAuthCode" placeholder="请输入验证码"/>
                                	<img id="authCodeImg" height="25px" alt="加载中..."/>
                                    <a href="##" v-on:click="nextImg">换一张</a>
                                </p>
                                
                                <p class="keeplogin"> 
									<input type="checkbox" name="loginkeeping" id="loginkeeping" v-model="checked" /> 
									<label for="loginkeeping">七天免登录</label>
								</p>
                                <p class="login button"> 
                                    <input type="button" v-on:click="login" value="登录" /> 
								</p>
                                <p class="change_link">
									还没有账号 ?
									<a href="#toregister" class="to_register">注册</b></a>
								</p>
                            </form>
                        </div>

                        <div id="register" class="animate form">
                            <form  action="mysuperscript.php" autocomplete="on"> 
                                <h1> Sign up </h1> 
                                <p> 
                                    <label for="usernamesignup" class="uname" data-icon="u">你的昵称</label>
                                    <input id="usernamesignup" v-model="username" required="required" type="text" placeholder="mysuperusername690" />
                                </p>
                                <p> 
                                    <label for="emailsignup" class="youmail" data-icon="e" >你的邮箱号</label>
                                    <input id="emailsignup" v-model="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/> 
                                </p>
                                <p> 
                                    <label for="passwordsignup" class="youpasswd" data-icon="p">你的密码</label>
                                    <input id="passwordsignup" v-model="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p>
                                    <label for="codeEmail">验证码:</label>
                                    <input type="text" id="codeEmail" v-model="verificationCode" placeholder="输入邮箱验证码"/>
                                    <button type="button" v-on:click="sendEmail">发送邮箱</button>
                                </p>
                                <p> 
                                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">确认密码 </label>
                                    <input id="passwordsignup_confirm" v-model="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
                                </p>
                                <p class="signin button"> 
									<input type="button" v-on:click="register" value="注册"/> 
								</p>
                                <p class="change_link">  
									已有账号 ?
									<a href="#tologin" class="to_register"> 去登录 </a>
								</p>
                            </form>
                        </div>
						
                    </div>
                </div>  
            </section>
        </div>

        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!--获取ajax请求对象的工具-->
    	<script src="js/requestUtil.js"></script>
        <script src="js/rl.js"></script>
    </body>
</html>